import React, {Component, createRef} from 'react';
import PubSub from 'pubsub-js'

import './index.css'

class Search extends Component {

    // 搜索框
    searchRef = createRef()

    render() {
        return (
            <div className={'search-container'}>
                <div className={'search-warp'}>
                    <h1>超 级 搜 索</h1>
                    <p>支持百度百科，搜狗百科</p>
                    <input className="search"
                           placeholder="试试搜索吧！"
                           autoComplete="off"
                           autoFocus=""
                           tabIndex="0"
                           autoCorrect="off"
                           autoCapitalize="off"
                           spellCheck="false"
                           ref={this.searchRef}
                           onKeyUp={this.handleSearch}
                    />
                </div>
            </div>
        );
    }

    // 处理回车搜索
    handleSearch = (event) => {
        if (event.key && event.key === "Enter") {
            PubSub.publish("search", this.searchRef.current.value)
        }
    }
}

export default Search;